<template>
	<div class="app-contain">
		<head-top></head-top>	
		<div class="bg-fff of nxb-box" id="aCoursesList">
			<div class="bg-fff of">
				<section class="container">
					<section class="mt20">
						<section class="path-wrap txtOf hLh30 nav-path-wrap firstLevel current">
							<a href="javascript:void(0);" class="c-333 fsize14 one" title="全部课程" @click="getCourseList({currentPage:1})">全部课程</a>
						</section>
						<section class="c-s-dl bg-fff c-cou-box">
							<dl>
								<div class="fl-wrap"> <dt><span class="c-333 fsize14">分类：</span></dt>
									<dd class="c-s-dl-li">
										<ul class="clearfix">
											<li :class="page['subjectId'] ==''?'current':''">
												<a id="0" title="全部" href="javascript:void(0);" @click="subjectId('')">全部</a>
											</li>
											<li v-for="item in subjectList" :class="page['subjectId'] ==item.id?'current':''">
												<a :id="item.id" :title="item.name" href="javascript:void(0);" @click="subjectId(item.id)">{{item.name}}</a>
											</li>
											
										</ul>
										<aside class="c-s-more">
											<a href="javascript: void(0)" title="" class="fsize14 c-master" style="display: none;">[展开]</a>
										</aside>
									</dd>
								</div>
							</dl>
							<div class="clear"></div>
						</section>
						<section class="c-s-dl bg-fff c-cou-box">
							<dl>
								<div class="fl-wrap clearfix"> <dt><span class="c-333 fsize14">类型：</span></dt>
									<dd class="c-s-dl-li fl">
										<ul class="clearfix">
											<li :class="page['filetype'] ==''?'current':''">
												<a href="javascript:void(0)" @click="filetype('')" title="全部">全部</a>
											</li>
											<li :class="page['filetype'] =='VIDEO'?'current':''">
												<a href="javascript:void(0)" @click="filetype('VIDEO')" title="视频">视频</a>
											</li>
											<li :class="page['filetype'] =='AUDIO'?'current':''">
												<a href="javascript:void(0)" @click="filetype('AUDIO')" title="音频">音频</a>
											</li>
											
										</ul>
									</dd>
								</div>
							</dl>
							<div class="clear"></div>
						</section>
						<section class="c-s-dl bg-fff c-cou-box">
							<dl>
								<div class="fl-wrap clearfix"> <dt><span class="c-333 fsize14">排序：</span></dt>
									<dd class="c-s-dl-li fl">
										<ul class="clearfix">
											<li :class="page['orderBy'] =='studyNum'?'current':''">
												<a href="javascript:void(0)" @click="orderBy('studyNum')" title="热门">热门</a>
											</li>
											<li :class="page['orderBy'] =='latest'?'current':''">
												<a href="javascript:void(0)"  @click="orderBy('latest')" title="最新">最新</a>
											</li>
										</ul>
									</dd>
									<dd class="fr"> <span class="c-ccc"> <tt class="c-master f-fM">{{page.currentPage}}</tt>/<tt class="c-666 f-fM">{{totalPageSize}}</tt> </span> </dd>
								</div>
							</dl>
							<div class="clear"></div>
						</section>
					</section>
				</section>
			</div>
			<section class="container">
				<section class="c-sort-box cou-list-wrap">
					<div class="mt15">
						<div class="net-cou-box open-cou-wrap">
							<ul class="of job-cou-list">
								<li v-for="item in curseList">
									<div class="cc-l-wrap">
										<a class="course-img" :title="item.name" href="javascript:void(0)" @click="routerInfo(item)"> 
											<img v-lazy="item.image"  alt="" class="img-responsive">
											<div class="course-label"> 
												<label title="视频" v-show="item.filetype == 'VIDEO'"><em class="icon16 video-icon"></em></label>
												<label title="音频" v-show="item.filetype == 'AUDIO'"><em class="icon16 audio-icon"></em></label>
											</div>
										</a>
										<div class="j-c-desc-wrap">
											<section class="j-c-title">
												<h3 class="pt10"> <a class="j-course-title" :title="item.name"  style="word-wrap: break-word;">{{item.name}}</a> </h3>
												<div class="cj-cou-time mt5 fsize12 hLh20"> 
													<div class="c-999"> <span class="fsize12 vam fl">时长：{{item.minutes}}分钟</span> <span class="ml15 vam pc-box-show fr"><span class="fsize12 vam ml2">人数：{{item.studyNum }}</span></span>
													</div>
												</div>
											</section>
										</div>
									</div>
								</li>
								
							</ul>
							<div class="noContent" v-show="curseList.length<1">暂无内容</div>
						</div>
						<div class="page-mar-top tac" style="margin: 30px; 0" v-show="totalResultSize>0">
							<el-pagination
							  background
							  prev-text = "上一页"
							  next-text = '下一页'
							  layout="prev, pager, next"
							  :current-page = "page.currentPage"
							  :page-count="totalPageSize"
							  :total="totalResultSize"
							  @current-change="currentChange">
							</el-pagination>
							
						</div>
					</div>
				</section>
			</section>
		</div>
		<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import { search } from '@/api/home'
	import {domainUrl} from '@/utils/index'
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	import {getSubjectList, getCourseList} from '@/api/course'
	export default {
		components: { //引入组件
			headTop,
			footBootom
		},
		name: 'course',
		data() {
			return {
				subjectList:[],
				curseList:[],
				totalResultSize:1,
				totalPageSize:1,
				page:{
					currentPage:1,
					orderBy:'',
					filetype:'',
					subjectId:""
				},
				
				
			}
		},
		watch: {
		  '$route': function (route) {
			    let query = this.$route.query;
				if(query['serch']){
					this.getSerchCourse(query.serch);
					return;
				}
				
			}
		 },
		created(){
			let query = this.$route.query;
			this.getSubjectList();
			if(query['serch']){
				this.getSerchCourse(query.serch);
				return;
			}else{
				this.getCourseList({currentPage:1});
			}
		},
		methods:{
			getSerchCourse(val){
				search(val).then((res)=>{
					let entity = res.entity;
					entity.forEach((item)=>{
						item.image = domainUrl()+item.image;
					});
					this.curseList = entity;
					
				})
			},
			getSubjectList(){
				getSubjectList().then((res)=>{
					this.subjectList = res.entity;
				})
			},
			getCourseList(data){
				getCourseList(data).then((res)=>{
					let entity = res.entity;
					entity.data.forEach((item)=>{
						item.image = domainUrl()+item.image;
					});
					this.curseList = entity.data;
					this.totalResultSize = entity.page.totalResultSize;
					this.totalPageSize = entity.page.totalPageSize
					this.page["currentPage"] = entity.page.currentPage;
					
				})
			},
			orderBy(val){
/* 				delete this.page["subjectId"];
				delete this.page["subjectId"]; */
				this.page["orderBy"] = val;
				this.page["currentPage"] = 1;
				this.getCourseList(this.page);
			},
			filetype(val){
/* 				delete this.page["orderBy"];
				delete this.page["subjectId"]; */
				this.page["filetype"] = val;
				this.page["currentPage"] = 1;
				this.getCourseList(this.page);
			},
			subjectId(id){
	/* 			delete this.page["orderBy"];
				delete this.page["filetype"]; */
				this.page["subjectId"] = id;
				this.page["currentPage"] = 1;
				this.getCourseList(this.page);
			},
			routerInfo(item){
				this.$router.push({
					path: '/courseInfo',
					query: {
						id: item.id,
						type:'COURSE'
					}
				})
				
			},
			currentChange(val){//分页
				this.page["currentPage"] = val;
				this.getCourseList(this.page);
			},
		}
	}
</script>

<style>
	
</style>